<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<title>Document</title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="app-7">
	  <ol>
	    <!--
	      现在我们为每个 todo-item 提供 todo 对象
	      todo 对象是变量，即其内容可以是动态的。
	      我们也需要为每个组件提供一个“key”，晚些时候我们会做个解释。
	    -->
	    <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
	  </ol>
	</div>
</body>
<script type="text/javascript">
	// 定义名为 todo-item 的新组件
	/*Vue.component('todo-item', {
	  template: '<li>这是个待办项</li>'
	})*/
	Vue.component('todo-item', {
	  // todo-item 组件现在接受一个
	  // "prop"，类似于一个自定义属性
	  // 这个属性名为 todo。
	  props: ['todo'],
	  template: '<li>{{ todo.text }}</li>'
	})
	var app7 = new Vue({
	  el: '#app-7',
	  data: {
	    groceryList: [
	      { id: 0, text: '蔬菜' },
	      { id: 1, text: '奶酪' },
	      { id: 2, text: '随便其他什么人吃的东西' }
	    ]
	  }
	})
	
</script>
</html>